<script lang="tsx">
/**
 * 功能框
 */
export default {
  name: "program-form"
}
</script>

<script lang="tsx" setup>
import ProgramFormManager from "@/frame/components/base/program-form/program-form-manager.ts"
import {ref, watch} from "vue"
import Render from "@/frame/components/core/render/index.vue"

/**
 * 定义emit
 */
const emit = defineEmits()

/**
 * 定义props
 */
const props = defineProps<{
  programFormModel?: ProgramFormManager
}>()

/**
 * 功能表单组件
 */
const programFormModel = ref<ProgramFormManager>()

/**
 * 监视
 */
watch(() => props.programFormModel, function (newValue: any) {
  if (newValue) {
    programFormModel.value = newValue
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="program-form">
    <div v-for="(item,index) of programFormModel?.els" :key="index" >
      <Render :item="item" v-bind="$attrs" class="form-item"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.program-form {
  flex: 0;
  display: flex;

  .form-item {
    margin: 5px;
    height: 40px;
    width: 100px;
  }
}
</style>